
<ng-container>
  <div style="display: flex;justify-content: flex-end;">
    <apes-card style="border-radius: 8px;margin: 10px;max-width: 200px ">
      <apes-dropdown apesPlacement="bottomRight">
        <div class="item d-flex align-items-center px-sm" apes-dropdown>
          {{currentPostName}}
          <i apes-icon apesType="down"></i>
        </div>
        <ul apes-menu>
          <li apes-menu-item *ngFor="let post of posts;" (click)="changePost(post.id)">{{post.name}}</li>
        </ul>
      </apes-dropdown>
    </apes-card>
  </div>


  <apes-card  apes-col apesMd="12" style="border-radius: 8px;margin-left: 10px">
    <apes-list [apesDataSource]="data" [apesRenderItem]="item" class="apes-todo-list-main" >
      <ng-template #item let-item>
        <apes-list-item [ngClass]="{'read': item.read}" (click)="onClick(item)" >
          <apes-list-item-meta
            [apesTitle]="apesTitle"
            [apesDescription]="apesDescription"
            apesAvatar="assets/tmp/img/oa/message.png"
            class="{{prefixCls}}-list">
            <ng-template #apesTitle>
              <div >
                <div class="{{prefixCls}}-list-business" >单号：{{item.businessKey}}</div>
                <div class="{{prefixCls}}-list-type">{{item.taskName}}</div>
              </div>
            </ng-template>
            <ng-template #apesDescription>
              <ul *ngIf="getDataContent(item.content)" class="description" [class.showMore]="!isShowMore">
                <li *ngFor="let data of contentData" style="line-height: 1.5; max-width: 400px;">{{data}}</li>
              </ul>
              <div>
                <div *ngIf="item.createTime" class="datetime">
                  {{getDateTime(item.createTime)}}
                </div>
              </div>
            </ng-template>
          </apes-list-item-meta>
        </apes-list-item>
      </ng-template>
    </apes-list>
  </apes-card>
</ng-container>
